<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue js</title>
    <style>
        .completed {
            text-decoration: line-through;
        }

        .something {
            color: red;
        }
    </style>
</head>

<body>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.js"></script>
<div class="container">
    <div id="app"><div>
        <ul>
            <li v-for="list in tasks">
                {{ list.id }} - {{ list.author }} - {{ list.name }} - {{ list.price }}
            </li>
        </ul></div>
        <form>
            <img id="preview" src="{{file && URL.createObjectURL(file)}}">
            {{file}}
            <input type="file" name="photo" v-on:change="preview">
            <input type="submit" value="提交" v-on:click="submitFile" >
        </form>
    </div>
</div>

<script>
    Vue.http.options.emulateJSON = true;//将提交的数据类型又request payload转换成form data 全局

    var demo = new Vue({
        el: '#app',
        data: {
            tasks: '', //为空，可以是null
            file: "sdfsdf",
            $file: null
        },
        mounted: function () {
            this.getCustomers();
            this.postData();
        },
        methods: {
            getCustomers: function () {
                this.$http.get('book.json')
                        .then(function (response) { //response传参，可以是任何值
                            this.tasks=response.data
                            console.log(response);
                        })
                        .catch(function (response) {
                            console.log(response)
                        })
            },
            postData: function () {

                this.$http.post('./postdata.php?id=a12',{message:'abc123'})
                        .then(function (response) { //response传参，可以是任何值
                           console.log(response.data);
                        })
                        .catch(function (response) {
                            console.log(response)
                        })
            },
            preview (e) {
                var file = e.target.files[0];
                var supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
                if (file && supportedTypes.indexOf(file.type) >= 0) {
                    this.file = file.name;
                    console.log(file)
                } else {
                    alert('文件格式只支持：jpg、jpeg 和 png');
                    this.clearFile();
                }
            },
            clearFile () {
                this.$file.value = '';
                this.file = null;
            },
            submitFile (e) {
                var self = this;
                if (this.file) {
                    // use async save function
                    saveFile(this.file, function() {
                        self.clearFile()
                    });
                    e.preventDefault();
                }
          }
        }
    })
</script>
</body>

</html>

